<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
    <link rel="stylesheet" href="./components/MySwitch.css">
    <style>
        .box{
            display: flex;
            flex-flow: row nowrap;
            width: 150px;
        }
        .box>div{
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        v-model 指令为 语法糖 指令
            + 普通表单标签语法糖:将属性绑定v-bind 和 事件绑定 v-on 结合表单元素规则进行 整合操作
            + 组件标签语法糖:将组件 父向子 数据传递属性进行 v-bind 绑定默认使用属性名 model-value
                            将组件 子向父 数据传递事件进行 v-on 绑定默认使用事件名 update:model-value , 同时完成事件源返回数据对变量的修改

        </pre>

        <p>flag:{{ flag }}</p>
        <input type="checkbox" v-model="flag">
        <my-checkbox :model-value="flag" @update:model-value=" flag = $event"></my-checkbox>
        <my-checkbox v-model="flag"></my-checkbox>

        <hr>

        <p>flag1:{{ flag1 }}</p>
        <input type="checkbox" true-value="是" false-value="否" v-model="flag1">
        <my-checkbox true-value="是" false-value="否" v-model="flag1"></my-checkbox>

        <hr>

        <p>arr:{{ arr }}</p>
        <input v-model="arr" value="A" type="checkbox" />
        <input v-model="arr" value="B" type="checkbox" />
        <input v-model="arr" value="C" type="checkbox" />
        <input v-model="arr" value="D" type="checkbox" />
        <br>
        <my-checkbox value="A" v-model="arr"></my-checkbox>
        <my-checkbox value="B" v-model="arr"></my-checkbox>
        <my-checkbox value="C" v-model="arr"></my-checkbox>
        <my-checkbox value="D" v-model="arr"></my-checkbox>


    </div>

    <script type="text/x-template" id="checkbox">

        <input type="checkbox" 
            :value="value" 
            :true-value="trueValue" 
            :false-value="falseValue"
            v-model="state"
        >

    </script>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";

        const MyCheckbox = {
            template:"#checkbox",
            emits:["update:modelValue"],
            props:{
                value:{
                    type:String,
                    default:""
                },
                trueValue:{
                    default:true
                },
                falseValue:{
                    default:false
                },
                modelValue:{
                    default(){
                        return []
                    }
                }
            },
            computed: {
                state:{
                    get(){
                        return this.modelValue
                    },
                    set(nv){
                        console.log(" 子组件中的 state set 方法 ",nv)
                        this.$emit("update:modelValue",nv)
                    }
                }
            },
        }

        createApp({
            components: {
                MyCheckbox,
            },
            data(){
                return {
                    flag:true,
                    flag1:"是",
                    arr:["A","D"]
                }
            },
            methods: {
                updateFlag(nv) {
                    this.flag = nv;
                },
                updateFlag1(nv) {
                    this.flag1 = nv;
                },
                updateArr(nv){
                    this.arr = nv;
                }
            },
        }).mount("#app");
    </script>
</body>
</html>